<template>
    <div class="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-50 flex items-center justify-center p-4">
        <div class="max-w-md w-full bg-white rounded-xl shadow-lg p-8 transform transition-all duration-300 hover:shadow-xl">
            <div class="text-center mb-8">
                <h2 class="text-2xl font-bold text-gray-700 mb-2">忘记密码</h2>
            </div>
            
            <el-form 
                :model="form" 
                :rules="rules" 
                ref="formRef" 
                label-position="top"
                class="space-y-4"
            >
                <el-form-item label="手机号" prop="phone" class="form-item">
                    <el-input 
                        type="tel"
                        v-model="form.phone" 
                        placeholder="请输入手机号"
                        :prefix-icon="Phone"
                        class="custom-input"
                    />
                </el-form-item>
                
                <el-form-item label="验证码" prop="code" class="form-item">
                    <div class="flex items-center gap-3">
                        <el-input 
                            type="number"
                            v-model="form.code" 
                            placeholder="请输入验证码"
                            :prefix-icon="Key"
                            class="w-76"
                        />
                        <el-button
                            type="primary" 
                            @click="handleSendCode" 
                            :disabled="isDisabled"
                            class="w-32 verification-btn"
                            :class="{'is-disabled': isDisabled}"
                        >
                            {{codeText}}
                        </el-button>
                    </div>
                </el-form-item>
                
                <el-form-item label="新密码" prop="newPassword" class="form-item">
                    <el-input 
                        v-model="form.newPassword" 
                        placeholder="请输入新密码"
                        :prefix-icon="Lock"
                        type="password"
                        show-password
                        class="custom-input"
                    />
                </el-form-item>
                
                <el-form-item label="确认密码" prop="confirmPassword" class="form-item">
                    <el-input 
                        v-model="form.confirmPassword" 
                        placeholder="请再次输入密码"
                        :prefix-icon="Lock"
                        type="password"
                        show-password
                        class="custom-input"
                    />
                </el-form-item>
                
                <el-form-item class="mt-8">
                    <el-button 
                        type="primary" 
                        @click="handleSubmit"
                        class="w-full !h-[44px] submit-btn"
                        :loading="loading"
                    >
                        重置密码
                    </el-button>
                </el-form-item>

                <div class="text-center mt-4">
                    <router-link to="/login" class="text-blue-500 hover:text-blue-600 text-sm">
                        返回登录
                    </router-link>
                </div>
            </el-form>
        </div>
    </div>
</template>

<script setup>
import { ref, onBeforeUnmount } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { Phone, Lock, Key } from '@element-plus/icons-vue'
import { forgetPassword, sendCode } from '@/api/LoginApi'

const router = useRouter()
const loading = ref(false)
const countdown = ref(60)
const interval = ref(null)

// 表单数据
const form = ref({
    phone: '',
    code: '',
    newPassword: '',
    confirmPassword: ''
})

const formRef = ref(null)

// 表单验证规则
const rules = {
    phone: [
        { required: true, message: '请输入手机号', trigger: 'blur' },
        { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
    ],
    code: [
        { required: true, message: '请输入验证码', trigger: 'blur' },
        { pattern: /^\d{6}$/, message: '请输入正确的验证码', trigger: 'blur' }
    ],
    newPassword: [
        { required: true, message: '请输入新密码', trigger: 'blur' },
        { min: 6, max: 16, message: '密码长度在6-16个字符之间', trigger: 'blur' },
        { 
            pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{6,16}$/,
            message: '密码必须包含大小写字母和数字',
            trigger: 'blur'
        }
    ],
    confirmPassword: [
        { required: true, message: '请再次输入密码', trigger: 'blur' },
        {
            validator: (rule, value, callback) => {
                if (value !== form.value.newPassword) {
                    callback(new Error('两次输入的密码不一致'))
                } else {
                    callback()
                }
            },
            trigger: 'blur'
        }
    ]
}

// 验证码按钮状态
const isDisabled = ref(false)
const codeText = ref('获取验证码')

// 发送验证码
const handleSendCode = async () => {
    try {
        // 验证手机号
        await formRef.value.validateField('phone')
        
        isDisabled.value = true
        countdown.value = 60
        
        // 开始倒计时
        interval.value = setInterval(() => {
            if (countdown.value > 0) {
                countdown.value--
                codeText.value = `${countdown.value}秒后重试`
            } else {
                clearInterval(interval.value)
                isDisabled.value = false
                codeText.value = '重新获取'
            }
        }, 1000)

        // 调用发送验证码接口
        await sendCode({ phone: form.value.phone })
        ElMessage.success('验证码已发送')
    } catch (error) {
        isDisabled.value = false
        if (error.message) {
            ElMessage.error(error.message)
        }
    }
}

// 提交表单
const handleSubmit = async () => {
    try {
        await formRef.value.validate()
        loading.value = true
        
        await forgetPassword({
            phone: form.value.phone,
            code: form.value.code,
            newPassword: form.value.newPassword
        })
        
        ElMessage.success('密码重置成功')
        router.push('/login')
    } catch (error) {
        if (error.message) {
            ElMessage.error(error.message)
        }
    } finally {
        loading.value = false
    }
}

// 组件销毁前清除定时器
onBeforeUnmount(() => {
    if (interval.value) {
        clearInterval(interval.value)
    }
})
</script>

<style scoped>
.form-item :deep(.el-form-item__label) {
    @apply text-gray-600 font-medium;
}

.custom-input :deep(.el-input__wrapper) {
    @apply shadow-none border border-gray-300 transition-all duration-300;
}

.custom-input :deep(.el-input__wrapper:hover) {
    @apply border-blue-400;
}

.custom-input :deep(.el-input__wrapper.is-focus) {
    @apply border-blue-500 ring-2 ring-blue-100;
}

.verification-btn {
    @apply transition-all duration-300;
}

.verification-btn:not(.is-disabled):hover {
    @apply transform -translate-y-0.5 shadow-md;
}

.submit-btn {
    @apply transition-all duration-300 text-base font-medium;
}

.submit-btn:not(.is-loading):hover {
    @apply transform -translate-y-0.5 shadow-md;
}

/* 添加输入框图标颜色 */
.el-input :deep(.el-input__prefix-inner) {
    @apply text-gray-400;
}

/* 添加表单项间距动画 */
.el-form-item {
    @apply transition-all duration-300;
}

/* 错误状态动画 */
.el-form-item.is-error :deep(.el-input__wrapper) {
    @apply animate-shake;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

.animate-shake {
    animation: shake 0.5s ease-in-out;
}
</style>